<template>
  <n-select
    :fallback-option="setSelectShow"
    :options="optionsData"
    :loading="loading"
    label-field="supplierName"
    value-field="supplierId"
    filterable
    clearable
    placeholder="选择供应商"
    @click.once="getOptionsData()"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import { fetchSupplierList } from '@/service';
import { useLoading } from '@/hooks';

export interface Props {
  /** 默认label */
  selectLabel?: string;
}

const props = withDefaults(defineProps<Props>(), {
  selectLabel: ''
});

const { loading, startLoading, endLoading } = useLoading(false);

const optionsData = ref<SelectOption[]>([]);

function setSelectShow(value: string): SelectOption {
  return {
    supplierName: props.selectLabel,
    supplierId: value
  };
}

function setOptionsData(data: any) {
  optionsData.value = data;
}
async function getOptionsData() {
  startLoading();
  const { data } = await fetchSupplierList();
  if (data) {
    setOptionsData(data);
    endLoading();
  }
}
</script>

<style scoped></style>
